import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/a.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/common/config.dart';
import 'package:finance_app/src/provider/dashboard/dashboard_drawer_provider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class TutorialDrawer extends StatelessWidget {
  final bool isOpen;
  const TutorialDrawer({Key key, this.isOpen = false}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      clipBehavior: Clip.hardEdge,
      type: MaterialType.transparency,
      child: AnimatedContainer(
        duration: Duration(milliseconds: 250),
        transform: Matrix4.translationValues(
            isOpen ? 0 : -(MediaQuery.of(context).size.width * 3 / 4), 0, 0),
        width: MediaQuery.of(context).size.width * 3 / 4,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(getDp(20)),
              bottomRight: Radius.circular(getDp(20)),
            )),
        child: Column(
          children: [
            buildDrawerHeader(context),
            Expanded(
              child: CustomScrollView(
                slivers: [
                  SliverList(
                      delegate:
                          SliverChildListDelegate(DashboardDrawerProvider()
                              .drawerList
                              .map((e) => e['isLine'] == true
                                  ? _buildLine()
                                  : _buildDrawerItem(
                                      title: e['title'],
                                      assets: e['asset'],
                                      router: e['router'],
                                    ))
                              .toList())),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  SizedBox buildDrawerHeader(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).padding.top + getDp(132),
      child: DrawerHeader(
          padding: EdgeInsets.only(
            left: getDp(33),
            right: getDp(40),
          ),
          decoration: BoxDecoration(
            color: aceWhiteGreyColor,
          ),
          child: PressedOpacityButton(
            onPressed: () {},
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                CircleAvatar(
                  radius: getDp(33.5),
                  backgroundImage:
                      Config.toImageProvider(Config.userProfile?.avatar),
                  backgroundColor: aceGrayColor,
                ),
                SizedBox(
                  width: getDp(20),
                ),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        Config.userProfile?.nickname ??
                            Config.userProfile?.name ??
                            '',
                        style: TextStyle(
                          color: aceDarkGrayColor,
                          fontSize: getSp(18),
                          fontWeight: FontWeight.w700,
                          height: 22 / 18,
                        ),
                      ),
                      SizedBox(
                        height: getDp(8),
                      ),
                      Container(
                        child: Text(
                            Config.currentSubscription == null ||
                                    Config.currentSubscription.isTrial == 1
                                ? S.current.free_trial
                                : '${Config.currentSubscription?.plan?.nameText}',
                            style: TextStyle(
                              color: aceDarkGrayColor,
                              fontSize: getSp(12),
                              fontWeight: FontWeight.w700,
                              height: 1,
                            )),
                        decoration: BoxDecoration(
                            color: aceGrayColor,
                            borderRadius: BorderRadius.circular(getDp(4))),
                        padding: EdgeInsets.symmetric(
                          horizontal: getDp(12),
                          vertical: getDp(4),
                        ),
                      ),
                    ],
                  ),
                ),
                SvgPicture.asset(
                  A.assetsImagesRight,
                  width: getDp(16),
                  height: getDp(16),
                ),
              ],
            ),
          )),
    );
  }

  Widget _buildDrawerItem({String title, String assets, String router}) =>
      PressedOpacityButton(
        onPressed: () {},
        padding: EdgeInsets.only(
          right: getDp(20),
          top: getDp(12.5),
          bottom: getDp(12.5),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              width: getDp(5),
              height: getDp(28),
              decoration: BoxDecoration(
                color:
                    title == S.current.home ? aceBlueColor : Colors.transparent,
                borderRadius: BorderRadius.circular(getDp(5)),
              ),
              margin: EdgeInsets.only(right: getDp(28)),
            ),
            SizedBox(
              width: getDp(22),
              height: getDp(22),
              child: SvgPicture.asset(
                assets,
                fit: BoxFit.contain,
              ),
            ),
            SizedBox(
              width: getDp(25),
            ),
            Expanded(
                child: Text(
              title,
              style: TextStyle(
                color: title == S.current.home ? aceBlueColor : aceBlackColor,
                fontSize: getSp(16),
                fontWeight:
                    title == S.current.home ? FontWeight.w700 : FontWeight.w400,
                height: 22 / 16,
              ),
            ))
          ],
        ),
      );

  Widget _buildLine() => Divider(
        height: getDp(8),
      );
}
